<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="/myAdmin/js/xadmin.js"></script>
    <script src="/myAdmin/js/myAjax.js"></script>
    <script src="../js/product/x-product-add.js"></script>
    <script src="../js/wangEditor.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>产品名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_title" name="name" required="" lay-verify="title" autocomplete="off" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>产品种类</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_type" name="type" required="" lay-verify="type" autocomplete="off" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>正常价</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_normalPrice" name="normalPrice" required="" lay-verify="price" autocomplete="off" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>市场价</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_price" name="price" required="" lay-verify="price" autocomplete="off" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>产品状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="enable" value="1" title="普通" checked="">
                    <input type="radio" name="enable" value="2" title="推荐">
                    <input type="radio" name="enable" value="3" title="置顶">
                </div>
            </div>
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">-->
<!--                    <span class="x-red">*</span>图片链接</label>-->
<!--                <div class="layui-input-inline">-->
<!--                    &lt;!&ndash;                    <input type="text" id="L_href" name="href" required="" lay-verify="href" autocomplete="off" class="layui-input">&ndash;&gt;-->
<!--                    <button type="button" class="layui-btn" id="L_href" name="href">-->
<!--                        <i class="layui-icon">&#xe67c;</i>上传图片-->
<!--                    </button>-->
<!--                </div>-->
<!--                <div class="layui-form-mid layui-word-aux"><img src="#" alt="请选择要上传的图片" id="showImg" width="100" height="100"></div>-->
<!--            </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>图片链接</label>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="L_href" name="href"><i class="layui-icon">&#xe67c;</i>上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1">
                        <p id="demoText"></p>
                    </div>
                    <div style="width: 95px;">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="content" class="layui-form-label">
                    <span class="x-red">*</span>产品详情</label>
            </div>
            <div id="content">
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-filter="add" lay-submit="">增加产品</button></div>
        </form>
    </div>
</div>
<script>
    const E = window.wangEditor;
    const editor = new E('#content');
    const editUrl = 'http://localhost:8888/wangEditor/upload';//服务器访问地址
    editor.config.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色//
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',   // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ];
    editor.config.uploadImgShowBase64 = true;  // 使用 base64 保存图片
    editor.config.uploadImgServer = editUrl; // 上传图片到服务器
    editor.config.showLinkImg = false;// 隐藏“网络图片”tab
    //配置属性名称，绑定请求的图片数据
    //controller会用到，可以随便设置，但是一定要与controller一致
    editor.config.uploadFileName = 'file';
    editor.config.withCredentials = true;
    // 将图片大小限制为 5M
    editor.config.uploadImgMaxSize = 5 * 1024 * 1024;
    editor.config.uploadImgHooks = {
        // 上传图片之前
        before: function(xhr) {
            // console.log(xhr)
            //
            // // 可阻止图片上传
            // return {
            //     prevent: true,
            //     msg: '需要提示给用户的错误信息'
            // }
        },
        // 图片上传并返回了结果，图片插入已成功
        success: function(xhr) {
            console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function(xhr, editor, resData) {
            // console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function(xhr, editor, resData) {
            // console.log('error', xhr, resData)
        },
        // 上传图片超时
        timeout: function(xhr) {
            // console.log('timeout')
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function(insertImgFn,result) {
            // result 即服务端返回的接口
            console.log(result)
            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            insertImgFn(result)
            // insert('http://localhost:8081'+result)
        }
    };

    editor.create();
</script>
</body>

</html>